<template>
  <div>
    <Back :title="$t('CountContainer.statisticsInfo')" class="back"></Back>
    <div class="chart">
      <div class="echartsbox" v-if="cpudata">
        <ChartCpu :cpudata="cpudata" :datatime="datatime"></ChartCpu>
      </div>
      <div class="echartsbox">
        <ChartRam :ramdata="ramdata" :datatime="datatime"></ChartRam>
      </div>
      <div class="echartsbox">
        <ChartNet :netdata="netdata" :datatime="datatime"></ChartNet>
      </div>
    </div>
    <div class="time">
      <label>{{$t('CountContainer_refreshTime')}}</label>
      <el-select v-model="time" placeholder="$t('CountContainer_plsSelectRefreshTime')">
        <el-option label="1s" value="1"></el-option>
        <el-option label="3s" value="3"></el-option>
        <el-option label="5s" value="5"></el-option>
        <el-option label="10s" value="10"></el-option>
        <el-option label="30s" value="30"></el-option>
        <el-option label="60s" value="60"></el-option>
      </el-select>
    </div>
    <div class="count">
      <table class="table" cellspacing="0">
        <thead>
          <tr>
            <th v-for="item in tableTitle" :key="item">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <td v-for="(td, index) in item" :key="index">{{ td }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Select, Option } from 'element-ui'
import echarts from '@/utils/echarts'
import Back from '@/components/Back'
import post from '@/utils/post'
import ChartCpu from '@/components/container/ChartCpu'
import ChartRam from '@/components/container/ChartRam'
import ChartNet from '@/components/container/ChartNet'
Vue.use(Select)
Vue.use(Option)

Vue.prototype.$echarts = echarts
export default {
  data () {
    return {
      data: [], // 表单数据
      tableTitle: [], // 表单标题数据
      cpudata: [], // cpu数据
      ramdata: { // 内存数据
        active_anon: [],
        cache: []
      },
      netdata: { // 网络数据
        RX: [],
        TX: []
      },
      time: '5', // 刷新时间
      datatime: [] // 每次请求的时间
    }
  },
  watch: {
    // 监听刷新时间变化，变化后重新开启定时器
    time: function () {
      clearInterval(this.timeinit)
      this.fetchdata()
    }
  },
  mounted () {
    // 进入页面进行数据请求
    const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/top"`
    post({ docker }, (res) => {
      this.data = res.Processes
      this.tableTitle = res.Titles
    }, this)
    const docker1 = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/stats?stream=false"`
    post({ docker: docker1 }, (res) => {
      let time = new Date()
      this.datatime.push(time.toTimeString().split(' ')[0])
      this.cpudata = [...this.cpudata, (res.cpu_stats.cpu_usage.total_usage / (res.cpu_stats.system_cpu_usage / 1024) * 100).toFixed(2)]
      this.ramdata = { active_anon: [...this.ramdata.active_anon, (res.memory_stats.stats.active_anon / 1000000)], cache: [...this.ramdata.cache, (res.memory_stats.stats.cache / 1000000)] }
      this.netdata = { RX: [...this.netdata.RX, (res.networks.eth0.rx_bytes / 1000000)], TX: [...this.netdata.TX, (res.networks.eth0.tx_bytes / 1000000)] }
    }, this)
    // 调用定时器
    this.fetchdata()
  },
  methods: {
    // 定时器函数，用于重复请求echarts所需数据
    fetchdata () {
      this.timeinit = setInterval(() => {
        const docker1 = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/stats?stream=false"`
        post({ docker: docker1 }, (res) => {
          let time = new Date()
          this.datatime.push(time.toTimeString().split(' ')[0])
          this.cpudata = [...this.cpudata, (res.cpu_stats.cpu_usage.total_usage / (res.cpu_stats.system_cpu_usage / 1024) * 100).toFixed(2)]
          this.ramdata = { active_anon: [...this.ramdata.active_anon, (res.memory_stats.stats.active_anon / 1000000)], cache: [...this.ramdata.cache, (res.memory_stats.stats.cache / 1000000)] }
          this.netdata = { RX: [...this.netdata.RX, (res.networks.eth0.rx_bytes / 1000000)], TX: [...this.netdata.TX, (res.networks.eth0.tx_bytes / 1000000)] }
        }, this)
      }, this.time * 1000)
    }
  },
  components: {
    Back,
    ChartCpu,
    ChartRam,
    ChartNet
  },
  // 离开页面销毁定时器
  beforeDestroy () {
    clearInterval(this.timeinit)
    this.fetchdata = null
  }
}
</script>

<style lang="scss" scoped>
.back{
  margin-bottom: 30px;
}
.chart{
  display: flex;
  justify-content: space-around;
  .echartsbox{
    width: 380px;
    height: 230px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
    box-shadow: #f2f2f2 0px 0px 5px 1px;
  }
}
.time{
  margin-top: 20px;
  font-size: 18px;
  margin-left: 30px;
  label{
    padding-right: 10px;
  }
}
.table{
  width: 100%;
  margin-top: 30px;
  text-align: center;
  border: 1px solid #f2f2f2;
  box-shadow: #f2f2f2 0px 0px 5px 1px;
  border-radius: 10px;
  tbody{
    tr:nth-child(2n-1){
      background: #f2f2f2;
    }
  }
  td,th{
    max-width: 150px;
    height: 50px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  th{
    height: 52px;
  }
}
</style>
